<template>
  <el-form
    ref="registerFormRef"
    :model="registerForm"
    :rules="registerRules"
    class="register-form form-container"
    size="large"
  >
    <el-form-item prop="nickName">
      <el-input
        v-model="registerForm.nickName"
        placeholder="昵称"
      >
        <template #prefix>
          <el-icon><User /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="account">
      <el-input
        v-model="registerForm.account"
        placeholder="账号"
      >
        <template #prefix>
          <el-icon><UserFilled /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="registerForm.password"
        type="password"
        placeholder="密码"
        show-password
      >
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input
        v-model="registerForm.confirmPassword"
        type="password"
        placeholder="确认密码"
        show-password
      >
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        class="w-full"
        @click="handleRegister"
      >
        注册
      </el-button>
    </el-form-item>
    <div class="form-footer">
      <el-button
        link
        type="primary"
        @click="$emit('switch-mode')"
      >
        已有账号？去登录
      </el-button>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { User, UserFilled, Lock } from '@element-plus/icons-vue'
import { validatePassword, validateNickname, validateConfirmPassword } from '@/utils/validate'

interface RegisterForm {
  nickName: string
  account: string
  password: string
  confirmPassword: string
}

const emit = defineEmits(['switch-mode', 'register-success'])

const loading = ref(false)
const registerFormRef = ref<FormInstance>()

const registerForm = reactive<RegisterForm>({
  nickName: '',
  account: '',
  password: '',
  confirmPassword: ''
})

const registerRules = {
  nickName: [
    { required: true, validator: validateNickname, trigger: 'blur' }
  ],
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, validator: validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword(registerForm.password), trigger: 'blur' }
  ]
}

const handleRegister = async () => {
  if (!registerFormRef.value) return
  
  await registerFormRef.value.validate(async (valid, fields) => {
    if (!valid) return
    
    loading.value = true
    try {
      // TODO: 调用注册 API
      const { nickName, account, password } = registerForm
      // const res = await register({ nickName, account, password })
      
      ElMessage.success('注册成功')
      emit('register-success')
    } catch (error: any) {
      ElMessage.error(error.message || '注册失败')
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped lang="scss">
@import '@/styles/form.scss';

.register-form {
  padding: 0 20px;
}
</style> 